@charset "utf-8";
@font-face { font-family: 'Avo'; src: url('../fonts/Avo.eot'); src: local('Avo'), url('../fonts/Avo.ttf') format('opentype'); }
@font-face { font-family: 'AvoBold'; src: url('../fonts/AvoBold.eot'); src: local('AvoBold'), url('../fonts/AvoBold.ttf') format('opentype'); }

body { font-family: Avo; color: #FFF; padding: 0; margin: 0; }

a:hover { text-decoration: none; cursor: pointer; }
a:active { outline: none; }
h3.title { position: absolute; left: 15px; top: 6px; z-index: 11; }
h3.shadow { position: absolute; left: 16px; top: 6px; z-index: 10; color: #333; }
div.image img { float: left; margin: 10px 10px 10px 5px; width: 100px; height: 100px; vertical-align: top; }
.close { background-image: url(../images/layout/close.png); position: absolute; width: 49px; height: 48px; right: 0; top: -15px;}
.overflow { overflow-y: auto; overflow-x: hidden; min-height: 0; max-height: 400px; margin: 0 auto 5px; }
.hidden { background-image: none; display: none; }
.pointer { cursor: pointer; }
.name { color: #258fa4; font-weight: bold; font-size: 18px; }

#wrapper { background: url(../images/layout/background.jpg) no-repeat center center; min-width: 960px; height: 971px; }
#footer { background: url(../images/layout/background-footer.png) no-repeat center center; height: 203px; width: 100%; position: absolute; top: 768px; }
#footer { color: #174346; text-align: center; }
#footer div { font-size: 22px; top: 0; }

#logoWrapper { position: absolute; background-image: url(../images/layout/logo.png); width: 307px; height: 212px; }

/* my group*/
#myGroupWrapper { position: absolute; left: 20%; top: 15%; }
#myGroupWrapper #myGroupIcon { background-image: url(../images/layout/mygroup.png); width: 175px; height: 175px; text-align: center; position: absolute; z-index: 10; }
#myGroupWrapper #myGroupIcon h2 { left: 10px; top: 20%; position: absolute; font-size: 20px; width: 150px; z-index: 11; }
#myGroupWrapper #myGroupIcon .shadow { left: 11px; top: 20%; vertical-align: middle; position: absolute; font-size: 20px; width: 150px; color: #555; z-index: 10; }

#myGroupWrapper #myGroupIcon:hover { background-image: url(../images/layout/mygroup-hover.png); }
#myGroupIconShadow { background-image: url(../images/layout/mygroup-shadow.png); width: 406px; height: 288px; position: absolute; left: -115px; top: 25px; z-index: 5; }

#myGroupContent { width: 460px; z-index: 100; }
#myGroupContentHeader { background: url(../images/layout/mygroup-popup-header.png) no-repeat; height: 70px; }
#myGroupContentBody .odd { background: url(../images/layout/bg-popup.png) repeat-y; padding-left: 10px;  }
#myGroupContentBody .even { background: url(../images/layout/bg-popup-even.png) repeat-y; padding-left: 10px; }
#myGroupContentBody .odd .myGroupContent, #myGroupContentBody .even .myGroupContent { text-align: left; padding-top: 5px; padding-right: 30px; padding-bottom: 1px; }
#myGroupContentFooter { background: url(../images/layout/mygroup-popup-footer.png) no-repeat; width: 460px; height: 38px; margin-top: -5px; }
/* end of my group*/

/* instruduction */
#instroductionWrapper { position: absolute; left: 65%; top: 5%; }
#instroductionWrapper #instroductionIcon { background-image: url(../images/layout/instroduction.png); width: 165px; height: 166px; position: absolute; z-index: 10; }
#instroductionWrapper #instroductionIcon h2 { left: 25px; top: 27% ; vertical-align: middle; position: absolute; font-size: 20px; z-index: 11; }
#instroductionWrapper #instroductionIcon .shadow { left: 26px;; top: 27%; vertical-align: middle; position: absolute; font-size: 20px; width: 150px; color: #555; z-index: 10; }
#instroductionWrapper #instroductionIcon:hover { background-image: url(../images/layout/instruduction-hover.png); width: 165px; height: 166px; }
#instroductionIconShadow { background-image: url(../images/layout/instroduction-shadow.png); width: 328px; height: 272px; left: -108px; top: 25px; position: absolute; z-index: 5; }

#instroductionContent { width: 460px; z-index: 100; }
#instroductionContentHeader { background: url(../images/layout/instroduction-popup-header.png) no-repeat; width: 460px; height: 71px; }
#instroductionContentBody { background: url(../images/layout/bg-popup.png) repeat-y; margin-left: 0; }
#instroductionContentBody .instroductionContent { margin-left: 8px; padding-left: 17px; width: 417px; text-align: left; padding-right: 10px !important; text-align: justify; }
#instroductionContentFooter { background: url(../images/layout/instroduction-popup-footer.png) no-repeat; width: 460px; height: 40px; margin-top: -5px; }
/* end of instruduction */

/* service */
#serviceWrapper { position: absolute; left: 20%; top: 60%; }
#serviceWrapper #serviceIcon { background-image: url(../images/layout/service.png); width: 204px; height: 204px; position: absolute; z-index: 10; }
#serviceWrapper #serviceIcon h2 { left: 43px; top: 55px; position: absolute; font-size: 25px; z-index: 11; }
#serviceWrapper #serviceIcon .shadow { left: 44px; top: 55px; position: absolute; font-size: 25px; color: #555; z-index: 10; }
#serviceWrapper #serviceIcon:hover { background-image: url(../images/layout/service-hover.png); width: 204px; height: 204px;}
#serviceIconShadow { background-image: url(../images/layout/service-shadow.png); width: 477px; height: 338px; left: -135px; top: 25px; position: absolute; z-index: 5; }

#serviceContent { width: 749px; z-index: 100; }
#serviceContentHeader { background: url(../images/layout/service-popup-header.png) no-repeat; height: 70px; }
#serviceContentBody { background: url(../images/layout/bg-service-popup.png) repeat-y; width: 748px; margin-left: 0; }

#serviceContentBody .serviceContent { margin-left: 8px; padding-left: 17px; width: 749px; text-align: left; }
#serviceContentBody .serviceContent ul li { font-size: 17px; }
#serviceContentFooter { background: url(../images/layout/service-popup-footer.png) no-repeat; height: 40px; margin-top: -5px; }
/* end of service */

/* contact */
#contactWrapper { position: absolute; left: 65%; top: 55%; }
#contactWrapper #contactIcon { background-image:url(../images/layout/contact.png); width: 190px; height: 190px; position: absolute; z-index: 10; }
#contactWrapper #contactIcon h2 { left: 45px; top: 50px; position: absolute; font-size: 25px; z-index: 11; }
#contactWrapper #contactIcon .shadow { left: 46px; top: 50px; position: absolute; font-size: 25px; color: #555; z-index: 10; }
#contactWrapper #contactIcon:hover { background-image:url(../images/layout/contact-hover.png); }
#contactIconShadow { background-image: url(../images/layout/contact-shadow.png); width: 444px; height: 314px; left: -130px; top: 25px; position: absolute; z-index: 5; }

#contactContent { width: 460px; z-index: 100; }
#contactContentHeader { background:url(../images/layout/contact-popup-header.png) no-repeat; height: 70px; }
#contactContentBody { background:url(../images/layout/bg-popup.png) repeat-y; }
#contactContentBody .contactContent { margin-left: 8px; padding-left: 17px; width: 417px; text-align: left; }
#contactContentFooter {  background: url(../images/layout/contact-popup-footer.png) no-repeat; height: 39px; margin-top: -5px; } 
/* end of contact */

.right { text-align: right !important; }
.error { color: #F00; margin-left: 5px; font-style: italic; font-size: 14px; }

.h110 { height: 110px !important; }

.w480 { width: 480px !important; }
.w429 { width: 432px !important; }
